<template>
  <div v-if="!this.$route.query.articleId">
    <van-empty description="描述文字"/>
  </div>
  <div v-else>
    <GetBack :titles="newArticleSource"/>
    <div class="newsdetail">
      <h2>{{ newTitle }}</h2>
      <p>消息来源：{{ newArticleSource }}</p>
      <div v-html="newdetail"></div>
<!--      <p class="soucsNew">来源(请-->
<!--        <router-link to="/Logining"><span>登录</span></router-link>-->
<!--        )： <a :href="newNniqueId">{{ newTitle }}</a></p>-->
    </div>
    <GiveLike @iscollec="collects" :iscollect="collectLocal" @islike="myLikes" :zan="zan"/>
  </div>
</template>
<script>
import {getCollectTheNews, getDetailsNews, getGiveLike} from "@/api/index.api";
import GiveLike from "@/components/GiveLike";
import GetBack from "@/components/GetBack";
import Vue from 'vue';
import {Toast} from 'vant';

Vue.use(Toast);
export default {
  name: "DetailsNews",
  data() {
    return {
      abc: "dsdf",
      articleId: null,
      newdetail: null,
      newTitle: null,
      newImgList: null,
      newArticleSource: null,
      newNniqueId: null,
      collect: false,//收藏
      myZan: false,
      zan: null,//点赞数量
      collectLocal: false,
      isComment:false
    }
  },
  methods: {
    collects(e) {
      this.collect = e;
      //收藏
      getCollectTheNews(this.articleId).then(res => {
        if (res.code === 0) {
          console.log(res)
          this.collect = false
        } else {
          this.$toast(res.msg)
        }
      })
    },
    myLikes: function (e) {
      console.log(e)
      if (e) {
        this.getDetailsNews()
        //点赞
        getGiveLike(this.articleId).then(res => {
          if (res.code === 0) {
            console.log(res)
          } else {
            this.$toast(res.msg)
            // Toast.fail({
            //   message: '请登录',
            //   position: 'top',
            // });
          }
        })
      }
    },
    getDetailsNews() {
      getDetailsNews(this.$route.query.articleId).then(res => {
        if (res.code === 0) {
          this.collectLocal = res.data.isCollect
          console.log(this.collectLocal)
          this.zan = res.data.zan
          this.newdetail = res.data.content
          this.newTitle = res.data.title
          this.newImgList = res.data.imgList
          this.newArticleSource = res.data.articleSource
          this.newNniqueId = res.data.uniqueId
        }
      })
    }
  },
  created() {
    if (this.$route.query.articleId) {
      this.articleId = this.$route.query.articleId
      this.getDetailsNews()
    }
  },
  components: {
    GiveLike,
    GetBack,
  }
}
</script>

<style lang="less" scoped>
div {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: beige ;

  .newsdetail {
    width: 96%;
    margin: auto;
    //padding-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    h2 {
      text-align: center;
    }

    img {
      width: 90%;
      padding-bottom: 10px;
    }

    .soucsNew {
      text-indent: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 10px;

      a {
        color: darkgray;

        span {
          color: aquamarine;
        }
      }
    }

    p {
      width: 90%;
      text-indent: 2em;
      padding-bottom: 5px;

      button {
        height: 25px;
        float: right;
        font-size: 14px;
      }
    }

    /deep/ p {
      margin: auto;
      width: 90%;
      text-indent: 2em;
    }

    /deep/ font {
      display: none;
    }

    /deep/ img {
      padding-left: 10%;
      margin: auto;
      width: 80%;
    }
  }
}


</style>